<template>
    <div class="goodsinfo-container">
        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        >
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>


        <!--商品轮播图区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner pic">
                    <img :src="pic" alt="">
                    <!--<swiper :picList="picList"></swiper>-->
                </div>
            </div>
        </div>
        <!--商品购买区域-->
        <div class="mui-card">
            <div class="mui-card-header">《{{goods.title}}》</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>￥109</del>&nbsp;&nbsp;销售价: <span class="now_price">￥92</span>
                    </p>
                    <p>购买数量: <numbox @getcount="getSelectedCount" ></numbox> </p>
                    <!--父组件向子组件传值，属性绑定  :max=""   子组件用props接收-->
                    <!--子组件向父组件传值（事件调用机制：父组件向子组件传递方法，子组件调用这个方法，同时把数据当作参数传递给这个方法）-->
                    <p>
                        <mt-button type="primary" size="small" @click="addToShopCar">加入购物车</mt-button>
                        <mt-button type="danger" size="small">立即购买</mt-button>
                    </p>
                </div>
            </div>
        </div>
        <!--商品参数区域-->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>图书分类：{{goods.catalog}}</p>
                    <p>阅读人数：{{goods.reading}}</p>
                    <p>上架时间：{{goods.bytime}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain="plain"  @click="goDesc(title)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain="plain" @click="goComment(title)">商品评论</mt-button>
            </div>
        </div>

    </div>
</template>

<script>
    import swiper from '../subcomponent/swiper.vue'
    import numbox from '../subcomponent/goodsinfo_numberbox.vue'
    export default {
        name: "goodsinfo",
        components:{
            swiper,
            numbox,
        },
        data(){
            return {
               title:this.$route.params.title,
               goods:[],
               pic:null,
               ballFlag:false,   //控制加入购物车小球显示与隐藏的标识符
               selectedCount:1,   //保存用户选中的商品数量

            }
        },
        methods:{
            goDesc(title){
                this.$router.push({name:"goodsdesc",params:{title}})
            },
            goComment(title){
                this.$router.push({name:"goodscomment",params:{title}})
            },
            getPic(){
                this.$axios.get('/query?key=ee22a1e78b90506df4c51628ccfae9f6&rn=10&pn=0&catalog_id=242')
                    .then(res=>{
                        console.log(res)
                        this.list=res.data.result.data
                        for(var i=0;i<res.data.result.data.length;i++){
                            if(this.title==res.data.result.data[i].title){
                                this.goods=res.data.result.data[i]
                            }
                        }
                        this.pic=this.goods.img
                        console.log(this.goods)
                    })
            },
            addToShopCar(){
                this.ballFlag=!this.ballFlag
            },
            beforeEnter(el){
                el.style.transform="translate(0,0)"
            },
            enter(el){
                el.offsetWidth;
                //小球动画优化思路
                //小球位移不能固定，不同设备分辨率不同，屏幕滑动距离；
                //先得到徽标的横纵坐标，再得到小球的横纵坐标
                //domObject.getBoundingClientRect() 返回一个矩形对象 得到坐标
                //获取小球在页面中的位置
                const ballPosition=this.$refs.ball.getBoundingClientRect();
                //获取徽标在页面中的位置
                const badgePosition=document.getElementById('badge').getBoundingClientRect();
                const x=badgePosition.left-ballPosition.left;
                const y=badgePosition.top-ballPosition.top;
                el.style.transform='translate('+x+'px,'+y+'px)';
                el.style.transition="all 0.3s ease"
            },
            afterEnter(el){
                this.ballFlag=!this.ballFlag
            },
            getSelectedCount(count){
                this.selectedCount=count
                console.log(this.selectedCount)
            }
        },
        created() {
            this.getPic();
        }
    }
</script>

<style scoped>
    .goodsinfo-container{
        background-color: #eee;
        overflow: hidden;
    }
    .pic {
        text-align: center;
    }
    .pic img {
        height: 100%;
    }
    .now_price{
        color:red;
        font-size:16px;
        font-weight: bold;
    }
    .mui-card-footer {
        display: block;
    }
    .mui-card-footer button{
        margin: 15px 0;
    }
    .ball {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top:472px;
        left:142px;
        z-index: 99;
    }
</style>